<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>Ant Design Of Angular</h1>
      </a>
    </div>

    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-menu-item nzMatchRouter routerLink="/welcome">
        <i nz-icon nzType="home"></i>
        <span>Home</span>
      </li>
      <li nz-submenu nzOpen nzTitle="Home" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a class="nav-link" routerLinkActive="active" routerLink="basics/home">Home</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a class="nav-link" routerLinkActive="active" routerLink="basics/public">Public</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a class="nav-link" routerLinkActive="active" routerLink="basics/admin1">
              <span *ngIf="(isAuthenticated$ | async) === false">🔒</span>
              Admin-1
            </a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a class="nav-link" routerLinkActive="active" routerLink="extras/admin2">
              <span *ngIf="(isAuthenticated$ | async) === false">🔒</span>
              Admin-2
            </a>
          </li>
        </ul>
      </li>
      <li nz-submenu nzTitle="userManage" nzIcon="team">
        <ul *ngIf="(isAuthenticated$ | async) === true">
          <li nz-menu-item nzMatchRouter>
            <a class="nav-link" routerLinkActive="active" routerLink="extras/admin1">Admin-1</a>
          </li>
        </ul>
      </li>
      <li nz-submenu  nzTitle="userInfo" nzIcon="edit">
        <ul *ngIf="(isAuthenticated$ | async) === true">
          <li nz-menu-item nzMatchRouter>
            <a>Basic Form</a>
          </li>
        </ul>
      </li>
      <li >
        <ul nz-menu nzMode="horizontal"></ul>
      </li>
      <li >
        <ul >
          <li nz-menu-item *ngIf="(isAuthenticated$ | async) === false">
            <b nz-icon nzType="login"></b>&nbsp;
            <a  (click)="login()">Login</a>
          </li>
          <li nz-menu-item *ngIf="(isAuthenticated$ | async) === true">
            <b nz-icon [nzType]="'logout'" ></b>&nbsp;
            <a  (click)="logout()">Logout</a>
          </li>
          <li nz-menu-item *ngIf="(isAuthenticated$ | async) === true">
            <b nz-icon [nzType]="'reload'"></b>&nbsp;
            <a (click)="refresh()">Refresh</a>   <!--<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>-->
          </li>
          <li nz-menu-item nzMatchRouter>
            <b nz-icon [nzType]="'user-add'"></b>&nbsp;
            <a (click)="refresh()" routerLink="register">Register</a>
          </li>
        </ul>
      </li>
    </ul>
    <oidc-app-app-menu></oidc-app-app-menu>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>

        <div class="login-div" *ngIf="(isAuthenticated$ | async) === false">
          <button nz-button nzType="primary" (click)="login()">登录</button> <!--routerLink="/login"-->
          <!--&nbsp;
          <button nz-button nzType="primary" (click)="sso()">单点登录</button>-->
        </div>

        <div class="login-div" *ngIf="(isAuthenticated$ | async) === true">
          您好，{{(identityClaims) ? (identityClaims | json)["sub"] : '未刷新' }}！
          <button nz-button nzType="primary" (click)="logout()">注销</button>
        </div>

      </div>
    </nz-header>

    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>

    <nz-footer>
      <!--  style="display: flex; height: 30px; justify-content: center; align-items: center"-->
      <div class="app-footer">
        <div class="footer-links" >
          <a href="https://github.com/ng-alain/ng-alain" target="_blank">Github</a> &nbsp;|&nbsp;
          <a href="https://github.com/ng-alain/ng-alain/issues" target="_blank">Issues</a>&nbsp;|&nbsp;
          <a href="https://github.com/ng-alain/ng-alain/releases" target="_blank">Releases</a>&nbsp;|&nbsp;
        </div>
        <div class="footer-copyright">
          Copyright &copy; 2018 <a href="https://github.com/ng-alain" target="_blank">ng-alain</a>
        </div>
      </div>
    </nz-footer>

  </nz-layout>
</nz-layout>
